<template>
  <section>
    <div class="container">
      <div class="left_item">
        <div class="con">
          <el-card class="box-card">
            <cm-scroll>
              <div style="padding:20px">
                <el-input
                  placeholder="输入关键字进行过滤"
                  v-model="filterText"
                  clearable
                ></el-input>
                <el-tree
                  class="filter-tree"
                  :data="menuList"
                  :props="defaultProps"
                  default-expand-all
                  :filter-node-method="filterNode"
                  ref="tree"
                  style="height:670px"
                  highlight-current
                  @node-click="handleNodeClick"
                  :expand-on-click-node="false"
                >
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span>{{ node.label }}</span>
                  <span>
                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-plus"
                      @click.stop="() => append(data)"
                    ></el-button>
                    <el-button
                      type="text"
                      size="mini"
                      icon="el-icon-delete"
                      @click="() => remove(node, data)"
                    ></el-button>
                  </span>
                </span>
                </el-tree>
              </div>
            </cm-scroll>
          </el-card>
        </div>

      </div>
      <div class="right_item">
        <el-card class="box-card">
          <el-form
            ref="newMenu"
            :rules="rulesSave"
            :model="newMenu"
            label-width="120px"
          >
            <el-form-item label="资源名称" prop="name">
              <el-input v-model="newMenu.name"></el-input>
            </el-form-item>
            <el-form-item disabled="true" label="别名" prop="alias">
              <el-input
                :readonly="!!newMenu.id"
                v-model="newMenu.alias"
              ></el-input>
            </el-form-item>
            <el-form-item label="上级" prop="parentId">
              <el-cascader
                :show-all-levels="false"
                :options="rootMenus"
                v-model="newMenu.parentId"
                :props="setProperty"
                style="width: 270px"
                clearable
              ></el-cascader>
            </el-form-item>
            <el-form-item label="资源访问url" prop="url">
              <el-input v-model="newMenu.url"></el-input>
            </el-form-item>
            <el-form-item label="资源备注" prop="remark">
              <el-input v-model="newMenu.remark"></el-input>
            </el-form-item>
            <el-form-item label="资源类型" prop="type">
              <el-select v-model="newMenu.type" placeholder="请选择">
                <el-option
                  v-for="item in menuTypes"
                  :key="item.keyword"
                  :label="item.label"
                  :value="item.keyword"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资源排序" prop="sn">
              <el-input v-model="newMenu.sn"></el-input>
            </el-form-item>
            <el-form-item label="级别" prop="level">
              <el-input v-model="newMenu.level"></el-input>
            </el-form-item>
            <el-form-item label="是否开放" prop="isOpen">
              <el-switch
                v-model="newMenu.isOpen"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                active-text="是"
                inactive-text="否"
                inactive-color="#eeeeee"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="icon" prop="icon">
              <el-input v-model="newMenu.icon"></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 40px">
              <el-button type="primary" size="small" @click="addNewMenu"
              >保存菜单
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </section>
</template>
<script>
  import {mapGetters} from "vuex";
  import _ from "lodash";

  export default {
    name: "getMenu",
    created() {
      this.getMenuList();
      console.log("menuList", this.menuList);
    },
    mounted() {
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

    data() {
      return {
        filterText: "",
        defaultProps: {
          children: "children",
          label: "label"
        },
        setProperty: {
          children: "children",
          label: "label",
          checkStrictly: true,
          value: "id"
        },
        clickID: "",
        rulesSave: {
          name: [{required: true, message: "请输入资源名称", trigger: "blur"}],
          sn: [{required: true, message: "请输入排序", trigger: "blur"}],
          type: [{required: true, message: "请选择类型", trigger: "blur"}],
          parentId: [{required: true, message: "请选择上级", trigger: "blur"}],
          alias: [{required: true, message: "请输入别名", trigger: "blur"}]
        },
        showEditPage: true,
        showNewPage: false,
        firstResId: 13,
        menuTypes: this.getDictionary("SYS-MENU-TYPE")
      };
    },
    computed: {
      ...mapGetters({
        menuList: "menuList",
        newMenu: "newMenu",
        appList: "appList"
      }),
      rootMenus() {
        let tem = _.cloneDeep(this.menuList);
        tem.unshift({id: 0, label: "根节点"});
        return tem;
      }
    },

    methods: {
      selectApp() {
        //console.log(this.selectAppKey);
        this.getMenuList();
      },
      append(data) {
        this.showEditPage = false;
        this.showNewPage = true;
        this.$store.commit("INIT_NEW_MENU");
        this.newMenu.parentId = data.id;
      },

      remove(node, data) {
        this.deleteMenu(data);
      },
      //  获取菜单
      getMenuList() {
        this.$store
          .dispatch("resourceTreeUsingPOSTS", {
            parentId: 0
          })
          .then(ret => {
            //console.log(ret.data);
            this.firstResId = ret.data[0].id;
            // this.firstMenu();
          });
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      firstMenu() {
        var tem = {
          id: this.firstResId
        };
        this.$store.dispatch("resViewUsingPOSTS", tem).then(ret => {
        });
        this.clickID = "";
      },

      //详情
      editMenu() {
        var tem = {
          id: this.clickID
        };
        this.$store.dispatch("resViewUsingPOSTS", tem).then(ret => {
        });
        this.clickID = "";
      },
      //  新增菜单
      addNewMenu() {
        this.$refs["newMenu"].validate(valid => {
          if (valid) {
            if (Array.isArray(this.newMenu.parentId)) {
              this.newMenu.parentId =
                this.newMenu.parentId === null
                  ? 0
                  : this.newMenu.parentId[this.newMenu.parentId.length - 1];
            }
            let param = {
              body: this.newMenu
            };
            this.$store.dispatch("resSaveUsingPOSTS", param).then(ret => {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              // this.$store.commit("INIT_NEW_MENU");
              this.clickID = "";
              this.showNewPage = false;
              this.showEditPage = true;
              this.getMenuList();
            });
          } else {
            return false;
          }
        });
        // }
      },
      //修改
      updateMenu() {
        this.$refs["newMenu"].validate(valid => {
          if (valid) {
            this.newMenu.resId = this.newMenu.id;
            var tem = {
              body: this.newMenu
            };
            this.$store.dispatch("resEditUsingPOSTS", tem).then(ret => {
              this.$message({
                message: "修改成功",
                type: "success"
              });

              // this.$store.commit("INIT_NEW_MENU");
              this.getMenuList();
            });
          } else {
            return false;
          }
        });
      },
      //  删除
      deleteMenu(data) {
        this.$confirm("确认删除当前菜单?", "提示", {})
          .then(() => {
            var tem = {
              id: data.id
            };
            this.$store.dispatch("resDelUsingPOSTS", tem).then(ret => {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getMenuList();
            });
          })
          .catch(() => {
          });
      },
      handleNodeClick(val) {
        // console.log(val);
        this.clickID = val.id;
        // this.showNewPage = false;
        if (this.showNewPage == true) {
          this.showNewPage = false;
          this.showEditPage = true;
          this.editMenu();
        } else if (this.showEditPage == true) {
          this.editMenu();
        }
      }
    },
    components: {}
  };
</script>
<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .con /deep/ .el-card__body {
    padding: 0;
  }

  .container {
    display: flex;
    float: left;
    width: 100%;
    justify-content: space-between;
  }

  .left_item {
    width: 340px;
    min-height: 600px !important;
  }

  .right_item {
    width: calc(100% - 350px)
  }
</style>
